<template>
  <div>
    <div class="divcss1">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="住院号">

          <el-input-number
            v-model="num"
            controls-position="right"
            :min="0"
            :max="10000"
          />

        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

      </el-form>

    </div>

   <div class="divcss2">

      <el-form :inline="true" :model="biaodan" class="demo-form-inline">

        <el-form-item label="姓名">
          <el-input v-model="biaodan.name" />
        </el-form-item>

        <el-form-item label="科室">
          <el-input v-model="biaodan.ksName" />
        </el-form-item>

        <el-form-item label="金额">
          <el-input v-model="biaodan.advance" />
        </el-form-item>

        <el-form-item label="性别">
          <el-input v-model="biaodan.sex" />
        </el-form-item>

        <el-form-item label="医生">
          <el-input v-model="biaodan.doctorName" />
        </el-form-item>

        <el-form-item label="已用">
          <el-input v-model="biaodan.consume" />
        </el-form-item>

        <el-form-item label="年龄">
          <el-input v-model="biaodan.age" />
        </el-form-item>

        <el-form-item label="床位">
          <el-input v-model="biaodan.bed" />
        </el-form-item>
 
        <el-form-item label="余额">
          <el-input v-model="biaodan.surplus" />
        </el-form-item>

      </el-form>

    </div>
    <div>
      <el-form
        :inline="true"
        :model="formInline1"
        class="demo-form-inline"
        style="padding-left: 20px"
      >
        <el-form-item>
          <el-input v-model="input" placeholder="请输入患者姓名" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="background-color: green"
            @click="onSubmit01"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        :header-cell-style="headClass"
        style="width: 98%;margin: auto"
      >
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="sex" label="性别" sortable />
        <el-table-column prop="age" label="年龄" sortable />
        <el-table-column prop="card" label="身份证号" />
        <el-table-column prop="ksName" label="科室" />
        <el-table-column prop="doctorName" label="医生" />
        <el-table-column prop="bed" label="床位" />
        <el-table-column
          prop="checkDate"
          label="入院日期"
          sortable
          width="180"
        />
        <el-table-column prop="advance" label="预交款" />
        <el-table-column prop="consume" label="已用" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="" :visible.sync="dialogFormVisibleUpdate">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="出院" name="first">
            <el-form
              ref="guahao"
              size="mini"
              :model="form"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item width="50px" prop="surplus">
                <el-input
                  v-model="form.surplus"
                  :disabled="true"
                  autocomplete="off"
                >
                  <template slot="prepend">余额</template>
                </el-input>
              </el-form-item>

              <el-form-item prop="qian">
                <el-input v-model="form.qian">
                  <template slot="prepend">{{ jiaofei }} </template>
                </el-input>
              </el-form-item>

              <el-button type="primary" @click="chuyuan">{{
                jiaofei
              }}</el-button>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="药品清单" name="second">
            <el-table
              :data="tableData2"
              :span-method="objectSpanMethod"
              border
              :header-cell-style="headClass"
              style="width: 98%; margin: auto"
            >
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="price" label="单价" sortable />
              <el-table-column prop="num" label="数量" sortable />
              <el-table-column prop="sumPrice" label="总价" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="项目清单" name="third">
            <el-table
              :data="tableData3"
              :span-method="objectSpanMethod"
              border
              :header-cell-style="headClass"
              style="width: 98%; margin: auto"
            >
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="price" label="单价" sortable />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import {
  allList,
  goList,
  drugList,
  projectList,
  jiaofei,
} from "../../../api/Discharge";
export default {
  data() {
    return {
      num: '',
      dialogFormVisibleUpdate: false,
      biaodan: {
        id: '',
        name: '',
        ksName: '',
        advance: '',
        sex: '',
        doctorName: '',
        consume: '',
        age: '',
        bed: '',
        surplus: ''
      },
      form: {
        id: "",
        surplus: "",
        qian: "",
        patientId: "",
      },
      tableData: [],
      tableData2: [],
      tableData3: [],
      jiaofei: "缴费",
    };
  },

  created() {
    this.allList()
  },

  methods: {
    chuyuan() {
      if (this.form.surplus < 0) {
        var nn = 0;
        var dd = 0;
        nn = parseInt(this.form.surplus);
        dd = parseInt(this.form.qian);
        var cc = nn + dd;
        jiaofei({ id: this.num, surplus: cc }).then((res) => {
          if (res.success) {
            this.dialogFormVisibleUpdate = false;
            this.onSubmit();
            this.$message({
              message: "缴费成功",
              type: "success",
            });
          } else {
            this.$message.error("缴费失败");
          }
        });
      }else{
        jiaofei({ id: this.num, surplus: 0 }).then((res) => {
          if (res.success) {
            this.dialogFormVisibleUpdate = false;
            this.onSubmit();
            this.$message({
              message: "退款成功",
              type: "success",
            });
          } else {
            this.$message.error("退款失败");
          }
        });
      }
    },
    handleEdit(index, row) {
      this.dialogFormVisibleUpdate = true;
      this.form = row;
      if (this.form.surplus < 0) {
        this.form.qian =
          this.form.surplus - this.form.surplus - this.form.surplus;
        console.log(this.form.qian);
        this.drugA();
        this.drugB();
      } else {
        this.jiaofei = "退款";
        this.form.qian = this.form.surplus;
        this.drugA();
        this.drugB();
      }
    },
    onSubmit() {
      allList({
        id: this.num
      }).then((res) => {
        if (res.success) {
          this.biaodan = res.result[0]
          goList({
            id: this.biaodan.id
          }).then((res) => {
            if (res.success) {
              this.tableData = res.result
            }
          })
        }
      });
    },
    drugA() {
      drugList({ patientId: this.form.patientId }).then((res) => {
        if (res.success) {
          this.tableData2 = res.result;
        }
      })
    },
    drugB() {
      projectList({ patientId: this.form.patientId }).then((res) => {
        if (res.success) {
          this.tableData3 = res.result;
        }
      });
    },

    headClass() {
      return 'text-align: center;background-color: gainsboro'
    }
  }
}
</script>
  <style  scoped>
.divcss1 {
  width: 35%;
  height: 200px;
  float: left;
  padding-top: 80px;
  padding-left: 50px
}
.divcss2 {
  width: 65%;
  height: 200px;
  float: left;
  padding-top: 30px;
  padding-left: 50px
}
</style>